// pages/index/index.tsx
import React, { useState } from 'react'
import { View, Text } from '@tarojs/components'
import { Grid, Image } from "@nutui/nutui-react-taro";
import HeaderTitle from "@/components/HeaderTitle";
import balanceIcon from '@/assets/balance.png'
import orderIcon from '@/assets/icon_order.png'
import myIcon from '@/assets/icon_my.png'
import iconHand from '@/assets/icon_hand_cost.png'
import iconAdminRecharge from '@/assets/icon_admin_recharge.png'
import Taro from "@tarojs/taro";
import './index.scss'

interface GridItem {
  id: number;
  text: string;
  icon: any;
  path?: string;
}

const Index: React.FC = () => {
  const [gridList, setGridList] = useState<GridItem[]>([
    {
      id: 1,
      text: "手动储值",
      icon: balanceIcon // 替换为实际图标地址
    },
    {
      id: 2,
      text: "手动消费",
      icon: iconHand
    },
    {
      id: 3,
      text: "会员列表",
      icon: myIcon
    },
    {
      id: 4,
      text: "订单列表",
      icon: orderIcon
    },
    {
      id: 5,
      text: "充值记录列表",
      icon: iconAdminRecharge
    },
  ]);

  const handleGridClick = (item: GridItem) => {
    console.log('点击了:', item.text);
    // 这里可以添加跳转逻辑
    switch(item.id) {
      case 1:
        Taro.navigateTo({ url: '/pages/admin/save/index' });
        break;
      case 2:
        Taro.navigateTo({ url: '/pages/admin/cost/index' });
        break;
      case 3:
        Taro.navigateTo({ url: '/pages/admin/member/index' });
        break;
        case 4:
        Taro.navigateTo({ url: '/pages/admin/order/index' });
        break;
        case 5:
        Taro.navigateTo({ url: '/pages/admin/recharge/index' });
        break;
      // ... 其他跳转
    }
  };

  return (
    <View className="pageContainer">
      {/* Header */}
      <View className='order-header'>
        <HeaderTitle title={'管理后台'} />
      </View>
      <Grid className="grid" columns={3} gap={10}>
        {gridList.map(item => (
          <Grid.Item
            key={item.id}
            text={item.text}
            onClick={() => handleGridClick(item)}
          >
            <Image
              src={item.icon}
              width="25px"
              height="25px"
              mode="aspectFit"
            />
          </Grid.Item>
        ))}
      </Grid>
    </View>
  )
}

export default Index
